<template>
	<div class="top-cnt" style="width: 100%;">
		<div class="title-cnt">
			<a class="h-type" 
				:class="{typeActive:index==isActive }"
				v-for="(title,index) in titles" v-bind:key="title.id"
				v-on:click="changeT(title.id)"
				>{{title.name}}</a>
			<!--a class="h-type" v-bind:style="typeR" v-on:click="changeT">{{titles[1].name}}</a-->
		</div>
		<div class="info-cnt" style="height: 400px;">
			<p>{{message[isActive]}}</p>
			<p>{{isActive}}</p>
		</div>
	</div>
</template>

<script>
	export default { 
		name: 'Multiple_Card',
		title:[],
		props:['titles'],
		components: { 
		},
		data: function () {
			return {
				message:[
					'1231456'
				],
				isActive:0,
				
			}
		},
		mounted(){
			//console.log(this.props.titles);
		},
		methods: {
			changeT(index){
				this.isActive=index;
			},
			
		},
	}
</script>

<style>
</style>